<template>
  <div class="box" v-loading="isLoading">
    <div class="title">
      {{ titles[select_option] }}
    </div>
    <div class="content">
      <div v-show="select_option===0">
        <OverView @unLoading="unLoading" @Loading="Loading"/>
      </div>
      <div v-show="select_option===1">
        <OnlineTestView @unLoading="unLoading" @Loading="Loading"/>
      </div>
      <div v-show="select_option===2">
        <ApplyView @unLoading="unLoading" @Loading="Loading"/>
      </div>
    </div>
  </div>
</template>

<script>
import {bus} from "@/paper_review/js/bus";
import OverView from "@/paper_review/view/console/main/OverView";
import OnlineTestView from "@/paper_review/view/console/main/OnlineTestView";
import ApplyView from "@/paper_review/view/console/main/ApplyView";

export default {
  name: "MainView",
  components: {ApplyView, OnlineTestView, OverView},
  data() {
    return {
      titles: ['概览', '在线测试', '应用'],
      select_option: 0,
      isLoading: false,
    }
  },
  mounted() {
    bus.on('selectMain', this.selectMain)
  },
  methods: {
    selectMain(i) {
      console.log(i);
      this.select_option = i;
      // this.isloading = true;
    },
    unLoading() {
      this.isLoading = false;
    },
    Loading() {
      this.isLoading = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 87vw;
  height: 90vh;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
  margin: 0 1vw 1vh 0;
  padding: 0 0 0 0;
  border-radius: 10px;
  background-color: #f7f7f9;

  .title {
    display: flex;
    width: 100%;
    height: 7vh;
    padding: 0 0 0 2vw;
    background-color: white;
    border-radius: 10px 10px 0 0;
    align-items: center;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2); /* 水平偏移, 垂直偏移, 模糊半径, 颜色 */
  }

  .content {
    width: 100%;
    height: 83vh;
  }
}

//获取焦点阴影变深
.box:hover {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
}

</style>